<html>

<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
    <style>
        .palette {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .palette li {
            width: 40px;
            height: 40px;
            border: 1px solid #000;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <ul class="palette" id="aaa">
        <li style="background-color:crimson"></li>
        <li style="background-color:bisque"></li>
        <li style="background-color:blueviolet"></li>
        <li style="background-color:coral"></li>
        <li style="background-color:chartreuse"></li>
        <li style="background-color:darkolivegreen"></li>
        <li style="background-color:cyan"></li>
        <li style="background-color:#194738"></li>
    </ul>

    <p class="color-picker"></p>

    <script>
        // var list = document.querySelectorAll("li");
        // for (var i = i = 0, len = list.length; i < len; i++) {
        //     list[i].onclick = function(e) {
        //         var t = e.target;
        //         var c = t.style.backgroundColor;
        //         var p = document.getElementsByClassName("color-picker")[0]
        //         p.innerHTML = c;
        //         p.style.color = c;

        //     }
        // }
        //点击某一个 Li 标签时，将 Li 的背景色显示在 P 标签内，并将 P 标签中的文字颜色设置成 Li 的背景色

        var oUl = document.getElementById("aaa");
        oUl.onclick = function (e) {
            var t = e.target;
            var c = t.style.backgroundColor;
            var p = document.getElementsByClassName("color-picker")[0]
            p.innerHTML = c;
            p.style.color = c;

        }

    </script>
</body>

</html>